import React, { Component } from 'react';
import { createForm } from 'rc-form';
import { Cascader } from 'antd';
// import city from './data'; //  数据见上提示
import { getCity } from '@/utils/utils';

interface CitySelectProps {
  //  监听选择
  onChange?: (value: any[]) => void;
  // 获取选择值
  getSelectedValues?: (value: any[]) => void;
  value?: any[];
  // 默认值
  defaultValue?: any[];
  cityCode?: string;
  setValue?: any[];
}
interface CitySelectState {
  city: any[];
  sValue: any[];
}

//先配置修饰器 没有配置的话用把 @createForm()删掉
//然后把最后一行 export default CitySelect;  换成 export default createForm()(CitySelect)
@createForm()
class CitySelect extends Component<CitySelectProps, CitySelectState> {
	constructor(props: CitySelectProps) {
		super(props);

		this.state = {
      city: [],
      sValue: props.setValue || []
    }
	}

  onCascaderChange = (selectedValues: any) => {
		const { onChange, getSelectedValues } = this.props;
		const { city } = this.state;
    const result: any[] = [];
    // 递归查询城市所有数据
    function findCityData(c: any[]) {
      c.forEach((item: any) => {
        const { id, label, value, children } = item;
        if (selectedValues.includes(value)) {
          result.push({ id, label, value });
        }
        if (children && children.length) {
          findCityData(children);
        }
      });
    }
    if (selectedValues){
      findCityData(city);
    }

    this.setState({ sValue: selectedValues });
    // 分发监听
    if (onChange) {
      onChange(selectedValues);
    }
    if (getSelectedValues) {
      getSelectedValues(result);
    }
  };

  componentDidMount() {
    const {
      value: selectedValues,
      cityCode,
      onChange
    } = this.props;

    // if (!selectedValues || !selectedValues.length) {
    //   return;
    // }
    const cc = cityCode ? cityCode : '';
    const city = getCity(cc);
		this.setState({
      city: city,
      sValue: selectedValues || []
    });
    // const result: any[] = [];
    // // 递归查询城市名称数据
    // function findLabel(cityChildren: any[]) {
    //   cityChildren.forEach((item) => {
    //     const { value, children } = item;
    //     if ((selectedValues || []).includes(value)) {
    //       result.push(value);
    //     }
    //     if (children && children.length) {
    //       findLabel(children);
    //     }
    //   });
    // }
    // // 卡省份解决县或市名称一样的问题
    // city.forEach((item) => {
    //   const { value, children } = item;
    //   if ((selectedValues || []).includes(value)) {
    //     result.push(value);
    //     if (children && children.length) {
    //       findLabel(children);
    //     }
    //   }
    // });
    if (onChange) {
      onChange(selectedValues || [])
    }
  }

  static getDerivedStateFromProps(props: any, current_state: any) {
    if (props.setValue && props.setValue.length > 0) {
      if (current_state.sValue.length > 0) {
        if (props.setValue[2] !== current_state.sValue[2]) {
          if (props.onChange) {
            props.onChange(props.setValue);
          }
          return {
            sValue: props.setValue,
          };
        }
      } else {
        if (props.onChange) {
          props.onChange(props.setValue);
        }
        return {
          sValue: props.setValue,
        };
      }
    }
    return null;
  }

  render() {
    // const { cityCode } = this.props;
    const { sValue, city } = this.state;
    return (
      <div>
        <Cascader
          options={city}
          placeholder="请选择城市"
          value={sValue}
          onChange={this.onCascaderChange}
        />
      </div>
    );
  }
}

export default CitySelect;
